<template>
	<view class="select">
		<!-- 门店搜索 -->
		<view class="seach" :style="{ height: headerHeight + 'rpx' }">
			<view class="cityNumber" @click="openProvince">
				<text class="size">{{cityName}}</text>
				<u-icon :name="cityShow?'arrow-up':'arrow-down'" color=" #999999" size="14"></u-icon>
			</view>
			<u-search placeholder="搜索门店" :show-action="false" class="search-input" v-model="keyword" :disabled="true"
				@click="routeSeach"></u-search>
		</view>
		<!-- 搜索列表 -->
		<scroll-view scroll-y="true" :style="{ height: 90 + 'vh' }">
			<list :seachList="seachList" @select="selectShop" v-if="seachList.length"></list>
			<empty v-else :content="'门店'"></empty>
		</scroll-view>

		<u-popup v-model="cityShow" mode="bottom" width="750rpx" height="1080rpx" :border-radius="16"
			:mask-close-able="false">
			<view class="coupon_pup">
				<view class="header_title">
					<view class="left">
						切换城市
					</view>
					<u-icon name="close" size="34" color="#666666" @click="CityClose"></u-icon>
				</view>
				<view class="location">
					<view class="size56">定位城市</view>
					<view class="right_tab">
						<u-icon name="map" color="#73F0EA" size="30"></u-icon>
						<text class="size57">{{cityNameTwo?cityNameTwo:'未开启定位'}}</text>
					</view>
				</view>
				<view class="flex-box">
					<view class="row-box">
						<scroll-view scroll-y="true" class="scroll-left">
							<view class="left_comlum">
								<view v-for="(item,index) in cityList" :key="index" class="left-Item"
									:class="activeIndex == index ?'color2':'color1'" @click="changeActive(item, index)">
									{{item.title}}
								</view>
							</view>
						</scroll-view>
						<scroll-view scroll-y="true" class="scroll-center">
							<view class="center_comlumn">
								<view v-for="(childItem,childIndex) in cityList[activeIndex].junior" :key="childIndex"
									:class="childActiveIndex == childIndex ?'center-Item-Active':'center-Item'"
									@click="changeChildIndex(childItem,childIndex)">
									{{childItem.title}}
								</view>
							</view>
						</scroll-view>
						<scroll-view scroll-y="true" class="scroll-right">
							<view class="right_comlumn">
								<view
									v-for="(grandsonItem,grandsonIndex) in cityList[activeIndex].junior[childActiveIndex].junior"
									:key="grandsonIndex"
									:class="grandsonActiveIndex == grandsonIndex ?'right-Item-Active':'right-Item'"
									@click="changeGrandsonIndex(grandsonItem,grandsonIndex)">
									<text class="left">{{grandsonItem.title}}</text>
									<text>{{grandsonItem.num}}</text>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="bottom">
					<view class="btn" @click="Citysure">
						确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import list from './components/list.vue'
	import empty from '@/components/empty.vue'
	import {
		province,
		shopList,
		City
	} from '@/api/shop.js'
	export default {
		components: {
			list,
			empty
		},
		data() {
			return {
				query: {
					province: '',
					search: ''
				},
				cityShow: false,
				activeIndex: 0,
				childActiveIndex: 0,
				grandsonActiveIndex: 0,
				cityList: [],
				windowHeight: uni.getSystemInfoSync().windowHeight,
				headerHeight: 106, // 假设的 header 高度
				// isFocused: false, // 控制是否获取焦点的标志
				keyword: null,
				seachList: [],
				cityName: '',
				type: 0,
				cityNameTwo: '',
				title: ''
			}
		},
		onShow() {
			this.getLocation()
		},
		onLoad(e) {
			if (e.type) {
				this.type = Number(e.type)
				if (this.type) {
					uni.setNavigationBarTitle({
						title: '通用门店'
					});
				}
			}
		},
		computed: {
			scrollViewHeight() {
				return this.windowHeight - this.headerHeight;
			},
		},
		mounted() {

			uni.onWindowResize(this.onWindowResize);
		},
		beforeDestroy() {
			uni.offWindowResize(this.onWindowResize);
		},
		methods: {
			getCity() {
				City().then(({
					data: res
				}) => {
					if (res.code == 1) {
						this.cityNameTwo = res.data.city
					}
				})
			},
			selectShop(item, index) {
				console.log('selectShop', item, index);
				if (!this.type) {
					uni.$emit('SHOPID', {
						shop_id: item.shop_id
					})
					uni.navigateBack({
						delta: 1
					})
				} else {
					// uni.redirectTo({
					// 	url:'particulars?shop_id=' + item.shop_id
					// })
				}
			},
			// 城市
			CityClose(message) {
				this.cityShow = message
			},
			Citysure() {
				this.query.province = this.cityList[this.activeIndex].junior[this.childActiveIndex].junior[this
					.grandsonActiveIndex].province
				this.getshopList()
				this.cityShow = false
			},
			changeActive(item, index) {
				this.activeIndex = index
				this.childActiveIndex = 0
				this.$forceUpdate()
			},
			changeChildIndex(item, index) {
				this.childActiveIndex = index
				this.grandsonActiveIndex = 0
				this.$forceUpdate()
			},
			changeGrandsonIndex(item, index) {
				console.log('index', index, item);
				this.grandsonActiveIndex = index
			},
			getshopList() {
				shopList(this.query).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.seachList = res.data.shop_list
						this.cityName = res.data.title
					}
				})
			},
			getProvince(query) {
				province(query).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.cityList = res.data
					}
				})
			},
			getLocation() {
				let that = this;
				console.log("getLocation");
				uni.getLocation({
					type: "gcj02", //gcj02
					success(res) {
						console.log('res', res);
						const {
							latitude,
							longitude
						} = res
						uni.setStorage({
							key: 'lat',
							data: latitude
						})
						uni.setStorage({
							key: 'long',
							data: longitude
						})
						that.getCity()
						that.getProvince()
						that.getshopList()
					},
					fail: (fail) => {
						console.log('位置信息获取失败');
						that.getProvince()
						that.getshopList()
					},
				});

			},
			openProvince() {
				this.cityShow = true
			},
			// 跳转搜索页
			routeSeach() {
				uni.navigateTo({
					url: 'seach'
				})
			},
			// 监听窗口大小变化（可选）
			onWindowResize(res) {
				this.windowHeight = res.windowHeight;
			},
			// handleFocus() {
			// 	this.isFocused = true;
			// },
			// handleBlur() {
			// 	// @blur="handleBlur"
			// 	this.isFocused = false; // 输入框失去焦点时，设置 isFocused 为 false
			// },
		}
	}
</script>

<style lang="scss">
	page {
		background: #e9e9e9;
	}

	.select {
		display: flex;
		flex-direction: column;
		height: 100vh;

		/* 视口高度 */
		.seach {
			position: relative;
			width: 750rpx;
			// height: 106rpx;
			background: #ffffff;
			box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(199, 205, 179, 0.15);
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 24rpx 0 40rpx;

			.cityNumber {
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				color: #333333;
				display: flex;
				flex-direction: row;
				align-items: center;

				.size {
					margin-right: 10rpx;
				}
			}

			.search-input {
				/* 基础样式 */
				position: absolute;
				right: 24rpx;
				width: 204rpx;
				height: 66rpx;
				background: #f6f6f6;
				border-radius: 16rpx;
				transition: width 0.3s ease;
				/* 宽度变化的过渡效果 */
			}

			.search-input-focused {
				/* 获取焦点后的样式 */
				width: 686rpx;
				/* 拉长后的宽度 */
			}

		}

		.coupon_pup {
			width: 750rpx;
			height: 1080rpx;
			border-radius: 16rpx 16rpx 0 0;

			.header_title {
				padding: 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				.left {
					font-size: 36rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #333333;
					flex: 1;
				}
			}

			.location {
				padding-left: 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 28rpx;

				.size56 {
					margin-right: 20rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #666666;
				}

				.right_tab {
					display: flex;
					flex-direction: row;
					align-items: center;

					.size57 {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;
						color: #73F0EA;
					}
				}
			}

			.flex-box {
				width: 100%;
				height: 51vh;
			}

			.bottom {
				width: 100%;
				height: 164rpx;
				padding-top: 24rpx;
				display: flex;
				justify-content: center;
				background: #ffffff;
				position: fixed;
				bottom: 0;

				.btn {
					width: 710rpx;
					height: 88rpx;
					background: #73F0EA;
					border-radius: 16rpx;
					font-size: 34rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.row-box {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 100%;

			.scroll-left {
				width: 196rpx;
				background: #f8f8f8;
				height: 100%;

				.left_comlum {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;

					.left-Item {
						width: 100%;
						padding: 20rpx 0;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;

						display: flex;
						align-items: center;
						justify-content: center;
					}

					.color1 {
						color: #666666;
					}

					.color2 {
						color: #73F0EA;
					}
				}
			}

			.scroll-center {
				width: 210rpx;
				height: 100%;
				border-right: 1rpx solid #e9e9e9;
				background-color: #ffffff;

				.center_comlumn {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;

					.center-Item {
						width: 200rpx;
						height: 80rpx;
						background: #ffffff;
						border-radius: 16rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						color: #666666;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 8rpx;
					}

					.center-Item-Active {
						background-color: rgba(129, 202, 197, 0.1);
						width: 200rpx;
						height: 80rpx;
						border-radius: 16rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						color: #73F0EA;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 8rpx;
					}
				}
			}

			.scroll-right {
				flex: 1;
				height: 100%;
				background-color: #ffffff;

				.right_comlumn {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;

					.left {
						flex: 1;
					}

					.right-Item {
						width: 330rpx;
						height: 80rpx;
						background: #ffffff;
						border-radius: 16rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						color: #666666;
						display: flex;
						flex-direction: row;
						align-items: center;
						padding: 0 26rpx;
						margin-bottom: 8rpx;
					}

					.right-Item-Active {
						background-color: rgba(129, 202, 197, 0.1);
						width: 330rpx;
						height: 80rpx;
						border-radius: 16rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						color: #73F0EA;
						display: flex;
						flex-direction: row;
						align-items: center;
						padding: 0 26rpx;
						margin-bottom: 8rpx;
					}
				}
			}
		}
	}
</style>